import React, { PureComponent } from 'react';
import { Row, Table, Divider } from 'antd';
import styles from './style.less';

class DiffModal extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const { handleSource, detailSource, loading, assType, sumDiffAmt } = this.props;
    // 表格配置 -

    const handleColumns = [
      {
        title: '类型',
        dataIndex: 'billTypeName',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '名称',
        dataIndex: 'empName',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '证件号',
        dataIndex: 'certNo',

        onCell: () => ({ style: { textAlign: 'center', width: 150 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 150 } }),
      },
      // {
      //   title: '个人社保账号',
      //   dataIndex: 'empAssAcco',
      //   className: Number(assType) === 2 ? styles.hide : null,
      //   onCell: () => ({ style: { textAlign: 'center', width: 150 } }),
      //   onHeaderCell: () => ({ style: { textAlign: 'center', width: 150 } }),
      //   render: text => text || '--',
      // },
      {
        title: '缴费人员类别',
        dataIndex: 'perIdeName',
        className:
          handleSource[0] && handleSource[0].perIde && Number(assType) === 1 ? null : styles.hide,
        onCell: () => ({ style: { textAlign: 'center', width: 120 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 120 } }),
      },
      // {
      //   title: '账户状态',
      //   dataIndex: 'accoStatusName',

      //   onCell: () => ({ style: { textAlign: 'center', width: 120 } }),
      //   onHeaderCell: () => ({ style: { textAlign: 'center', width: 120 } }),
      //   render: text => text || (Number(assType) === 1 ? '正常户' : '已实缴'),
      // },
      {
        title: '业务年月',
        dataIndex: 'busiYm',

        onCell: () => ({ style: { textAlign: 'center', width: 120 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 120 } }),
      },
      {
        title: '总金额',
        dataIndex: 'sumAmt',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
    ];

    const detailColumns = [
      {
        title: '产品',
        dataIndex: 'assName',

        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '缴费类型',
        dataIndex: 'typeName',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        // render: (value, row) => row.detList.map((item, index) => <div />),
        render: (value, row) =>
          row.detList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.typeName ? item.typeName : '--'}</p>
              {index !== row.detList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '回盘数据',
        dataIndex: 'actlAmo',

        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: (value, row) =>
          row.detList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.actlAmo}</p>
              {index !== row.detList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '申报数据',
        dataIndex: 'ordAmo',

        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: (value, row) =>
          row.detList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.ordAmo}</p>
              {index !== row.detList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '差额',
        dataIndex: 'diffAmo',

        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: (value, row) =>
          row.detList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.diffAmo}</p>
              {index !== row.detList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
    ];
    const socialAddColumns = [
      {
        title: '养老',
        children: [
          {
            title: '企业基数',
            dataIndex: 'old_unitBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人基数',
            dataIndex: 'old_empBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费比例(%)',
            dataIndex: 'old_unitProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费比例(%)',
            dataIndex: 'old_empProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'old_unitAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'old_empAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '滞纳金',
            dataIndex: 'old_lateFee',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '利息',
            dataIndex: 'old_inte',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '当月应缴额',
            dataIndex: 'old_ymAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
        ],
      },
      {
        title: '失业',
        children: [
          {
            title: '企业基数',
            dataIndex: 'workOut_unitBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人基数',
            dataIndex: 'workOut_empBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费比例(%)',
            dataIndex: 'workOut_unitProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费比例(%)',
            dataIndex: 'workOut_empProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'workOut_unitAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'workOut_empAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '滞纳金',
            dataIndex: 'workOut_lateFee',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '利息',
            dataIndex: 'workOut_inte',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '当月应缴额',
            dataIndex: 'workOut_ymAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
        ],
      },
      {
        title: '工伤',
        children: [
          {
            title: '企业基数',
            dataIndex: 'injuries_unitBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人基数',
            dataIndex: 'injuries_empBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费比例(%)',
            dataIndex: 'injuries_unitProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费比例(%)',
            dataIndex: 'injuries_empProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'injuries_unitAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'injuries_empAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '滞纳金',
            dataIndex: 'injuries_lateFee',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '利息',
            dataIndex: 'injuries_inte',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '当月应缴额',
            dataIndex: 'injuries_ymAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
        ],
      },
      {
        title: '医疗',
        children: [
          {
            title: '企业基数',
            dataIndex: 'health_unitBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人基数',
            dataIndex: 'health_empBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费比例(%)',
            dataIndex: 'health_unitProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费比例(%)',
            dataIndex: 'health_empProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'health_unitAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'health_empAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '滞纳金',
            dataIndex: 'health_lateFee',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '利息',
            dataIndex: 'health_inte',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '当月应缴额',
            dataIndex: 'health_ymAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
        ],
      },
      {
        title: '生育',
        children: [
          {
            title: '企业基数',
            dataIndex: 'birth_unitBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人基数',
            dataIndex: 'birth_empBase',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费比例(%)',
            dataIndex: 'birth_unitProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费比例(%)',
            dataIndex: 'birth_empProp',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'birth_unitAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'birth_empAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '滞纳金',
            dataIndex: 'birth_lateFee',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '利息',
            dataIndex: 'birth_inte',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
          {
            title: '当月应缴额',
            dataIndex: 'birth_ymAmo',
            onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
            onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
          },
        ],
      },
      {
        title: '商业补充医疗金额',
        dataIndex: 'busReplenish',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '大病医疗金额',
        dataIndex: 'weak',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
    ];
    const accuAddColumns = [
      {
        title: '企业基数',
        dataIndex: 'accu_unitBase',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '个人基数',
        dataIndex: 'accu_empBase',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '企业缴费比例(%)',
        dataIndex: 'accu_unitProp',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '个人缴费比例(%)',
        dataIndex: 'accu_empProp',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '企业缴费',
        dataIndex: 'accu_unitAmo',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '个人缴费',
        dataIndex: 'accu_empAmo',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '滞纳金',
        dataIndex: 'accu_lateFee',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '利息',
        dataIndex: 'accu_inte',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
      {
        title: '当月应缴额',
        dataIndex: 'accu_ymAmo',
        onCell: () => ({ style: { textAlign: 'center', width: 100 } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: 100 } }),
      },
    ];

    const HandleTable = {
      columns:
        Number(assType) === 1
          ? handleColumns.concat(socialAddColumns)
          : handleColumns.concat(accuAddColumns),
      dataSource: handleSource,
      bordered: true,
      size: 'middle',
      loading,
      scroll: { x: Number(assType) === 1 ? 3000 : 1000 },
      pagination: false,
      rowKey: 'billTypeName',
    };
    const DetailTable = {
      columns: detailColumns,
      dataSource: detailSource,
      bordered: true,
      size: 'middle',
      loading,
      pagination: false,
      rowKey: 'assName',
    };
    return (
      <div>
        <Row>
          <Table {...HandleTable} style={{ marginTop: '10px' , width: 752 }} />
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              height: '30px',
              lineHeight: '30px',
              width: 752,
            }}
          >
            <span style={{ fontSize: 15, fontWeight: 'bold' }}>差额明细</span>
            <span>
              差异总额：
              <span style={{ color: '#FAAD14' }}>{sumDiffAmt}</span>
            </span>
          </div>
          <Table {...DetailTable} style={{ marginTop: '10px' , width: 752 }} />
        </Row>
      </div>
    );
  }
}

export default DiffModal;
